<template>
  <div id="classify">
    <div class="mui-content mui-row mui-fullscreen">
      <div class="mui-col-xs-3">
        <div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
          <span  v-for="(segmentedControlsItem,index) in dataJson.segmentedControlsData" :key="segmentedControlsItem.id" v-bind:class="{'mui-active':segmentedControlsItem.isActive}"  @click="changeProduct(segmentedControlsItem.id,index)" class="mui-control-item">{{segmentedControlsItem.name}}</span>
        </div>
      </div>
      <div id="segmentedControlContents" class="mui-col-xs-9">
        <div class="mui-control-content mui-active">
          <ul class="mui-table-view mui-grid-view">
            <li v-for="segmentedControlContentsItem in dataJson.segmentedControlContentsData" :key="segmentedControlContentsItem.id" @click="toProductDetail(segmentedControlContentsItem.id)" class="mui-table-view-cell mui-media mui-col-xs-6 p_list">
              <div>
                <img class="mui-media-object" :src="segmentedControlContentsItem.pic" >
                <div class="mui-media-body">{{segmentedControlContentsItem.name}}</div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import commonJson from '../../../static/js/common';
  import {Swiper, SwiperItem,Scroller} from 'vux'
  export default {
      data() {
        return {
          dataJson: {
            segmentedControlsData:'',
            segmentedControlContentsData:'',
            domainName:commonJson.commonData().domainImgName
          }
        } 
      },
      mounted() {
        var that = this;
        that.axios.get(commonJson.commonData().domainName + '/api/v1/goods/firstCategory', {  //获取一级分类
          params: {
            pageIndex:1,
            pageSize:50
          }
        })
        .then(function (response) {
          console.log(response.data)
          if (response.data.code == 0) {
              that.dataJson.segmentedControlsData = that.processingFunction(response.data.data.rows,'firstCategory');
              that.getGoodsList(that.dataJson.segmentedControlsData[0].id);         //获取第一个默认选中项的所有商品
          } else {

          }
        })
        .catch(function (err) {
          console.log(err);
        });
      },
      components: {

      },
      methods: {
          processingFunction: function (data,type) {
          var that = this;
          switch (type) {
           case 'firstCategory':
             var processObj = new Array();
                data.forEach(function (ele, i) {
                  let object = {}
                  if (i == 0) {            
                    processObj.push(Object.assign({}, object , { //数组中push对象
                      name: ele.name,
                      sort_id: ele.sort_id,
                      id: ele.id,
                      pic: commonJson.commonData().domainName + ele.pic,
                      isActive: true,
                      hasError: false
                    }))
                  } else {             
                    processObj.push(Object.assign({}, object , { //数组中push对象
                      name: ele.name,
                      sort_id: ele.sort_id,
                      id: ele.id,
                      pic: that.dealImg(ele.pic),
                      isActive: false,
                      hasError: false
                    }))
                  }
                }, this);
                return processObj;
             break;
          case 'GoodsList':
             var processObj = new Array();
                data.forEach(function (ele, i) {
                  let object = {}          
                    processObj.push(Object.assign({}, object , { //数组中push对象
                      name: ele.shop_name,
                      id: ele.id,
                      pic: that.dealImg(ele.pic)
                    }))
                }, this);
                return processObj;
             break;
           default:
             break;
         }          
        },
        getGoodsList: function(parens_id){
          var that = this;
          that.axios.get(commonJson.commonData().domainName + '/api/zbds/goods/goodsList', {  //获取一级分类下所有商品
            params: {
              parent_id:parens_id,
              pageSize : 100,
					  	pageIndex : 1
            }
          })
          .then(function (response) {
            console.log(response.data)
            if (response.data.code == 0) {
               that.dataJson.segmentedControlContentsData = that.processingFunction(response.data.data.rows,'GoodsList');              
            } else {

            }
          })
          .catch(function (err) {
            console.log(err);
          });
        },
        changeProduct:function(parens_id,index){                //点击改变数据
            let that = this; 
            that.dataJson.segmentedControlsData.forEach(function(ele,i){
                that.dataJson.segmentedControlsData[i].isActive = false;
            })
            that.dataJson.segmentedControlsData[index].isActive = true;
            that.getGoodsList(parens_id);
        },
        toProductDetail:function(id){   //前往商品详情
            console.log(id);
            this.$router.push({ name: 'productDetail', query: { goods_id: id }});
        },
        dealImg:function(param){       //处理图片
          if (param) {
            if(param.indexOf(',') != -1){
              param = param.split(',')[0];
              if(param.indexOf('zhibodianshang/upload/') != -1) {
                return domainImgName + param.split('zhibodianshang/upload')[1];
              } else if(param.indexOf('putaotang/upload') != -1) {
                return domainImgName + param.split('putaotang/upload')[1];
              } else if(param.indexOf('http') != -1) {
                return param;
              } else {
                return commonJson.commonData().domainImgName + param;
              }
            }else{
              if(param.indexOf('zhibodianshang/upload/') != -1) {
                return domainImgName + param.split('zhibodianshang/upload')[1];
              } else if(param.indexOf('putaotang/upload') != -1) {
                return domainImgName + param.split('putaotang/upload')[1];
              } else if(param.indexOf('http') != -1) {
                return param;
              } else {
                return commonJson.commonData().domainImgName + param;
              }		
            }
          }
        }
      }
  }

</script>

<style scoped>
  .mui-content {
    background-color: #fff;
    padding-bottom: 65px;
  }

  .imgRightTop {
    width: 100%;
    padding: 0.3rem;
  }

  .mui-bar {
    background-color: #fff;
  }

  .imgRightTop img {
    width: 100%;
  }

  #segmentedControlContents .mui-table-view {
    padding: 0;
    background: none;
  }

  #segmentedControlContents .p_list {
    width: 30%;
    background-color: #FFFFFF;
  }

  #segmentedControlContents .mui-table-view.mui-grid-view .mui-table-view-cell {
    margin: 10px 0 0 2%;
    padding: 5px;
  }

  #segmentedControlContents .mui-table-view.mui-grid-view .mui-table-view-cell>a:not(.mui-btn) {
    margin: 0;
  }

  .mui-row.mui-fullscreen>[class*="mui-col-"] {
    height: 100%;
  }

  .mui-col-xs-3,
  .mui-control-content {
    overflow-y: auto;
    height: 100%;
  }

  .mui-control-content {
    background-color: #F2F2F2;
  }

  .mui-segmented-control .mui-control-item {
    line-height: 50px;
    width: 100%;
  }

  .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
    background-color: #F2F2F2;
  }

  .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
    font-size: 13px;
  }

  #segmentedControls.mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
    border-right: 1px solid #E1E1E3;
    border-bottom: 1px solid #EDEDED;
  }

  #segmentedControls.mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active {
    border-bottom: 1px solid #EDEDED;
    border-right: 0;
  }

  .mui-table-view:after {
    height: 0;
  }

  .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object {
    height: 65px;
  }

</style>
